<template>
    <view class="container">
        <back />
        <view class="publishLayout">
            <view class="inpLayout">
                <input
                    :value="titleVal"
                    type="text"
                    class="input"
                    placeholder="Title"
                    @input="titleInput"
                />
            </view>
            <view class="tareaLayout">
                <textarea
                    :value="contentVal"
                    type="text"
                    class="textarea"
                    placeholder="Content"
                    @input="contentInput"
                />
            </view>
            <view class="photoLayout">
               <scroll-box
                    :imgList="imgList"
                    @pushImgList="pushImgList"
               />
            </view>
            <view class="complete" hover-class="hoverBtn" @click="completeCli">
                PUBLISH
            </view>
        </view>
        
    </view>
</template>

<script>
import { addMomentApi } from "@/servers/momentServer.js";
import storage from "@/utils/storage";
import { toast, chooseImageFn, uploadFn } from "@/common";
import back from "@/pages_second/components/back/back.vue";
import { mapActions, mapState } from "vuex";
import scrollBox from '../components/scrollBox/scrollBox.vue';
export default {
    components: { back, scrollBox },
    data() {
        return {
            titleVal: "",
            contentVal: "",
            imgList: [],
            
        };
    },
    computed: {
        ...mapState("userStore", ["userInfo"]),
    },
    methods: {
        ...mapActions("momentStore", ["getAllMomentAction"]),
        
        
        pushImgList(path){
            this.imgList.push({ path });
        },
        titleInput(e) {
            this.titleVal = e.detail.value;
        },
        contentInput(e) {
            this.contentVal = e.detail.value;
        },
        async completeCli() {
            if (!this.titleVal || !this.contentVal) {
                toast({ title: "标题和内容不能为空~" });
                return;
            }
            let option;
            if (!!this.imgList.length) {
                option = {
                    title: this.titleVal,
                    content: this.contentVal,
                    user_id: this.userInfo.id,
                    path_list: this.imgList,
                };
            } else {
                option = {
                    title: this.titleVal,
                    content: this.contentVal,
                    user_id: this.userInfo.id,
                };
            }
            const res = await addMomentApi(option);
            if (res.code === 0) {
                toast({ title: "发表成功~" });
                setTimeout(() => {
                    this.getAllMomentAction();
                    uni.navigateBack({});
                }, 600);
            }
        },
    },
    created() {},
    watch: {},
};
</script>

<style lang="scss" scoped>
.container {
    padding: 48rpx;

    .publishLayout {
        padding-top: 200rpx;
        background: #fff;
        .inpLayout {
            margin-bottom: 36rpx;
        }

        .label {
            font-size: 34rpx;
            font-weight: bolder;
            padding-left: 8rpx;
        }
        .input {
            height: 88rpx;
            line-height: 88rpx;
            border: #e6e8ec 2rpx solid;
            background: #fff;
            padding: 0 16rpx;
            margin-top: 16rpx;
            border-radius: 24rpx;
        }

        .textarea {
            border: #e6e8ec 2rpx solid;
            background: #fff;
            width: 100%;
            border-radius: 24rpx;
            padding: 16rpx;
            box-sizing: border-box;
            margin-top: 16rpx;
        }
        .complete {
            background: $redTheme;
            color: #fff;
            margin-top: 30rpx;
            border-radius: 12rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 24rpx 0;
            font-size: 32rpx;
            font-weight: 600;
            .icon {
                width: 48rpx;
                height: 48rpx;
                margin-right: 8rpx;
            }
        }
        .photoLayout {
            display: flex;
            flex-direction: column;
            margin-top: 36rpx;
            border: #e6e8ec 2rpx solid;
            border-radius: 24rpx;
            padding-top: 36rpx;
            .scrollBox {
                .scroll_view {
                    white-space: nowrap;
                    .Item {
                        padding: 24rpx;
                        display: inline-block;
                    }
                    .img {
                        width: 234rpx;
                        height: 234rpx;
                        border-radius: 24rpx;
                    }
                }
            }
        }
        .buttonBox {
            display: none;
            // display: flex;
            justify-content: space-evenly;
            .photo {
                padding: 24rpx 0rpx;
                background: $bgTheme;
                border-radius: 12rpx;
                width: 24%;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .album {
                padding: 24rpx 0rpx;
                background: $bgTheme;
                border-radius: 12rpx;
                width: 24%;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
        .icon {
            width: 54rpx;
            height: 42rpx;
        }
    }

    .otherLayout {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 36rpx;

        .title {
            text-align: center;
            font-size: 32rpx;
            font-weight: 600;
        }

        .input {
            height: 56rpx;
            line-height: 56rpx;
            background: #fff;
            padding: 0 16rpx;
            margin-top: 16rpx;
            border-radius: 24rpx;
        }

        .stepsBox {
            width: 40%;
            background: #636e72;
            color: #fff;
            border-radius: 12rpx;
            padding: 12rpx 24rpx;
            padding-bottom: 32rpx;
            .input {
                color: #636e72;
            }
            .inputBox {
                margin-top: 24rpx;
                font-size: 28rpx;
                text-align: center;
            }
        }
        .redientBox {
            width: 40%;
            background: #f38276;
            color: #fff;
            border-radius: 12rpx;
            padding: 12rpx 24rpx;
            padding-bottom: 32rpx;
            .input {
                color: #f38276;
            }
            .inputBox {
                margin-top: 24rpx;
                font-size: 28rpx;
                text-align: center;
            }
        }
        .add {
            background: #fff;
            color: #636e72;
            text-align: center;
            padding: 12rpx;
            margin-top: 32rpx;
            border-radius: 12rpx;
        }
    }
}
.more {
    color: $blueTheme;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20rpx 0;
    .icon {
        width: 22rpx;
        height: 22rpx;
        margin-left: 24rpx;
    }
    .up {
        animation: rotate 0.5s forwards;
        @keyframes rotate {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(180deg);
            }
        }
    }
    .down {
        animation: rotate_2 0.5s forwards;
        @keyframes rotate_2 {
            0% {
                transform: rotate(-180deg);
            }
            100% {
                transform: rotate(0deg);
            }
        }
    }
}
</style>
